<!--
 * @docName: orderInformation.vue
 * @Author: mwl
 * @Date: 2024/8/30
 * @LastEditors: zhongxiong
 * @LastEditTime: 14:03
-->
<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="全部">
        <a-card :bordered="false">
          <div class="table-page-search-wrapper" style="margin-top: 10px;">
            <a-form layout="inline">
              <a-row :gutter="24" style="margin-top: 10px">
                <a-col :md="8" :lg="6" :xl="7" :xxl="7">
                  <a-form-item label="支付时间">
                    <a-range-picker
                      style="width: 300px;"
                      v-model="queryParam.time1"
                      @change="onChange1"
                      format="YYYY-MM-DD HH:mm:ss"
                      :showTime="{ defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')] }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :md="4" :lg="4" :xl="4" :xxl="4">
                  <a-form-item label="订单状态">
                    <a-select placeholder="请选择订单状态" v-model="queryParam.businessStatus">
                      <a-select-option value="">全部订单状态</a-select-option>
                      <a-select-option value="0">待完善</a-select-option>
                      <a-select-option value="1">待审核</a-select-option>
                      <a-select-option value="2">审核驳回</a-select-option>
                      <a-select-option value="3">待支付</a-select-option>
                      <a-select-option value="4">办理中</a-select-option>
                      <a-select-option value="5">已完成</a-select-option>
                      <a-select-option value="6">已开票</a-select-option>
                      <a-select-option value="7">已取消</a-select-option>
                      <a-select-option value="8">支付失败</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="10">
                    <span class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
                      <a-button @click="searchResets" icon="reload" style="margin-left: 10px">重置</a-button>
                      <!--              <a-button
                                      v-has="`qsb_qobm:view:btndcbd${tabNum}`"
                                      type="primary"
                                      @click="handleExportXlsFun(exportObj)"
                                      icon="download"
                                      style="margin-left: 10px"
                                    >导出表单</a-button
                                    >-->
                      <a @click="handleToggleSearch" style="margin-left: 8px">
                        {{ toggleSearchStatus ? '收起' : '展开' }}
                        <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                      </a>
                    </span>
                </a-col>
              </a-row>
              <div class="table-page-search-wrapper" v-show="toggleSearchStatus">
                <a-row :gutter="24">
                  <a-col :md="5" :lg="5" :xl="5" :xxl="5">
                    <a-form-item label="订单号">
                      <a-input placeholder="请输入" v-model="queryParam.orderNo"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="24" :lg="24" :xl="24" :xxl="24">
                    <div
                      style="border: 1px solid #ececec;border-radius: 4px; margin: 0 0 20px;box-sizing: border-box;padding: 8px;"
                    >
                      <div style="margin-bottom: 10px;border-bottom: 1px solid #ececec;padding-bottom: 8px">
                        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                          全部支付项
                        </a-checkbox>
                      </div>
                      <a-checkbox-group v-model="checkedList" :options="subitemTypeData.optionList" @change="onChange" />
                    </div>
                  </a-col>
                </a-row>
              </div>
            </a-form>
          </div>
          <div class="table-div">
            <a-table
              ref="table"
              bordered
              :columns="columns"
              :dataSource="tableData"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
              :scroll="{ x: 800 }"
            >
              <!-- 字符串超长截取省略号显示-->
              <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>

              <!--支付项-->
              <span class="container" slot="subitem" slot-scope="text, record">
                <template>
                  <div class='table-li' v-for="item in record.tradeOrderSubitemVos">{{ subitemTypeData.tableTypeKeyName[item.subitem] }}</div>
                </template>
              </span>

              <!--订单金额-->
              <span class="container" slot="actuallyAmount" slot-scope="text, record">
                <template>
                  <div class='table-li' v-for="item in record.tradeOrderSubitemVos">
                    <amountConversion :typeConver="'yuan'" :num="item.actuallyAmount"></amountConversion>元
                  </div>
                </template>
              </span>
              <span class="container" slot="finishRefundAmount" slot-scope="text, record">
                <template>
                  <div class='table-li' v-for="item in record.tradeOrderSubitemVos">
                    <amountConversion :typeConver="'yuan'" :num="item.finishRefundAmount"></amountConversion>元
                  </div>
                </template>
              </span>

              <!--业务办理状态-->
              <span class="container" slot="businessStatus" slot-scope="text, record">
              {{
                  {
                    0: '待完善',
                    1: '待审核',
                    2: '审核驳回',
                    3: '待支付',
                    4: '办理中',
                    5: '已完成',
                    6: '已开票',
                    7: '已取消',
                    8: '支付失败',
                  }[text]
                }}
              </span>

              <!--支付状态-->
              <span class="container" slot="orderStatus" slot-scope="text, record">
                <div class='table-li' v-for="item in record.tradeOrderSubitemVos">{{{0:'待支付',1:'支付中',2:'已支付',3:'退款中',4:'全额退款',5:'部分退款',6:'已取消',7:'支付失败',8:'线下支付失败',9:'线下支付确认中'}[item.orderStatus]}}</div>
              </span>

              <!--支付方类型-->
              <span class="container" slot="payerType" slot-scope="text, record">
                <div :style="{height:infoListVoHeight*record.tradeOrderSubitemVos.orderPayInfoVos.length+'px' }" class='table-li'>{{{1:'渠道通用账户支付',2:'企业通用账户支付',3:'渠道微信扫码',4:'渠道支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码',7:'渠道税费账户',8:'企业税费账户',9:'线下支付',10:'招行聚合支付',null:'&#45;&#45;'}[record.tradeOrderSubitemVos.payerType]}}</div>
                </span>
              <!--操作-->
              <span slot="action" slot-scope="text, record">
                <a href="javascript:;"
                   v-if="record.businessStatus == 5 && record.isInvoicing == 1"
                   @click="goTo(record)"
                >开具发票</a>
                <a href="javascript:;" v-else @click="goTo(record)">查看详情</a>

              </span>
            </a-table>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import { handleExportXlsNew } from '@/common/newHandleExportXls'
import { cloneObject, conversionBranch, conversionElement, limitDigits } from '@/utils/util'
import { getOrderV2ListPage } from '@api/account'
import * as Utils from '@/utils/util'
import { Storage } from '@/utils/util'
const plainOptions = [
  { value: 1001, label: '注册服务', logType: { pn: 12 }, url: '/qsbRegisteredBusiness/DetailedInformationPage' },
  { value: 1002, label: '企业服务续费', logType: { pn: 13 }, url: '/qsbRegisteredBusiness/DetailedInformationPage' },
  { value: 1003, label: '开票服务', logType: {}, url: '/qsbInvoiceBusiness/newInvoicingDetails' },
  // { value:1004,label:'退票服务',logType:{},url:'/qsbInvoiceBusiness/returnTicketDetails' },
  {
    value: 1005,
    label: '银行开户',
    logType: { pn: 1 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  {
    value: 1006,
    label: '工商注册信息变更',
    logType: { pn: 7 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  {
    value: 1007,
    label: '企业注销',
    logType: { pn: 8 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  { value: 1008, label: '税务变更', logType: {}, url: '/qsbEnterpriseServices/taxChangesDetails' },
  { value: 1009, label: '电子签章', logType: {}, url: '/qsbInvoiceBusiness/electronicSignatureDetails' },
  { value: 1013, label: '税务登记', logType: {}, url: '/qsbRegisteredBusiness/taxRegistrationDetails' },
  {
    value: 1014,
    label: '税务申报（核定）',
    logType: { pn: 9 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  { value: 1015, label: '税务申报（查账）', logType: {}, url: '/qsbEnterpriseServices/individualDeclarationDetails' },
  {
    value: 1016,
    label: '企业服务模式变更',
    logType: { pn: 5 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  {
    value: 1017,
    label: '邮寄资料',
    logType: { pn: 3 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  { value: 1018, label: '退票服务', logType: {}, url: '/qsbInvoiceBusiness/returnTicketDetails' },
  {
    value: 1019,
    label: '增值服务',
    logType: { pn: 10 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  }
]
const plainOptionsobj = {
  '1001': {
    value: 1001,
    label: '注册服务',
    logType: { pn: 12 },
    url: '/qsbRegisteredBusiness/DetailedInformationPage'
  },
  '1002': {
    value: 1002,
    label: '企业服务续费',
    logType: { pn: 13 },
    url: '/qsbRegisteredBusiness/DetailedInformationPage'
  },
  '1003': { value: 1003, label: '开票服务', logType: {}, url: '/qsbInvoiceBusiness/newInvoicingDetails' },
  '1005': {
    value: 1005,
    label: '银行开户',
    logType: { pn: 1 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1006': {
    value: 1006,
    label: '工商注册信息变更',
    logType: { pn: 7 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1007': {
    value: 1007,
    label: '企业注销',
    logType: { pn: 8 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1008': { value: 1008, label: '税务变更', logType: {}, url: '/qsbEnterpriseServices/taxChangesDetails' },
  '1009': { value: 1009, label: '电子签章', logType: {}, url: '/qsbInvoiceBusiness/electronicSignatureDetails' },
  '1013': { value: 1013, label: '税务登记', logType: {}, url: '/qsbRegisteredBusiness/taxRegistrationDetails' },
  '1014': {
    value: 1014,
    label: '税务申报（核定）',
    logType: { pn: 9 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1015': {
    value: 1015,
    label: '税务申报（查账）',
    logType: {},
    url: '/qsbEnterpriseServices/individualDeclarationDetails'
  },
  '1016': {
    value: 1016,
    label: '企业服务模式变更',
    logType: { pn: 5 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1017': {
    value: 1017,
    label: '邮寄资料',
    logType: { pn: 3 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  },
  '1018': { value: 1018, label: '退票服务', logType: {}, url: '/qsbInvoiceBusiness/returnTicketDetails' },
  '1019': {
    value: 1019,
    label: '增值服务',
    logType: { pn: 10 },
    url: '/qsbBusinessManagement/enterpriseDetails/ServicesInProgress'
  }
}
const defaultCheckedList = []
export default {
  name: 'orderInformation',
  props: {
    tabNum: { type: [String, Number] }
  },
  data() {
    return {
      remarkShow:false,
      mistakeTips:false,
      previewVisible:false,
      previewVisiblePay:false,
      checkedList: defaultCheckedList,
      subitemTypeData: [],
      businessTypeData: [],
      indeterminate: false,
      checkAll: false,
      plainOptions,
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      tableData: [],
      detailsData:{},
      amountRaw:null,//原始金额
      form:{
        bounty:0,
        cash:0,
        mitigate:0,
        remark:''
      },
      infoListVoHeight:54,
      infoTxListVoHeight:54,
      rules: {
        bounty: [
          { required: true, message: '奖励金不能为空'},
        ],
        cash: [
          { required: true, message: '现金不能为空'},
        ]
      },
      wordData: {
        type: '1',
        word: null
      },
      channelOrEntWordList: [],
      exportObj: {
        name: '导出明细',
        url: '/qsb/order/pay/list/export',
        extension:'.xlsx'
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showSizeChanger: true
      },
      columns: [
        {
          title: '订单号',
          align: 'center',
          width: 100,
          dataIndex: 'orderId'
        },
        {
          title: '渠道名称',
          align: 'center',
          width: 180,
          dataIndex: 'channelName',
          scopedSlots: { customRender: 'esContent' }
        },
        {
          title: '企业名称or负责人',
          align: 'center',
          width: 180,
          dataIndex: 'entName',
          scopedSlots: { customRender: 'esContent' }
        },
        {
          title: '支付创建时间',
          dataIndex: 'createTime',
          align: 'center',
          width: 210
        },
        {
          title: '支付项',
          dataIndex: 'subitem',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'subitem' }
        },
        {
          title: '订单内容',
          dataIndex: 'orderName',
          align: 'center',
          width: 130
        },
        {
          title: '支付状态',
          dataIndex: 'orderStatus',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'orderStatus' }
        },

        {
          title: '订单金额',
          align: 'center',
          width: 180,
          dataIndex: 'actuallyAmount',
          scopedSlots: { customRender: 'actuallyAmount' }
        },
        {
          title: '已退款金额',
          align: 'center',
          width: 180,
          dataIndex: 'finishRefundAmount',
          scopedSlots: { customRender: 'finishRefundAmount' }
        },
        {
          title: '业务状态',
          dataIndex: 'businessStatus',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'businessStatus' }
        },

        /*{
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 160,
          fixed: 'right'
        }*/
      ]
    }
  },
  created() {
    this.getTableData()
    this.subitemTypeData = Storage.get('SubitemType')
    console.log(123, this.subitemTypeData)
    this.businessTypeData = Storage.get('BusinessType')
  },
  methods: {
    onChangeNumber(e,type){

      if(type == 'bounty'){
        this.form.bounty = e;
      }else if( type == 'cash'){
        this.form.cash = e;
      }else if( type == 'mitigate'){
        this.form.mitigate = e;
        if(e > 0){
          this.remarkShow = true;
        }else{
          this.remarkShow = false;
        }
      }
      console.log(this.form)
      let sum = conversionBranch(this.form.bounty) + conversionBranch(this.form.cash) + conversionBranch(this.form.mitigate);
      console.log(sum+'---'+conversionBranch(this.amountRaw))
      if(sum == conversionBranch(this.amountRaw)){
        this.mistakeTips = false;
      }else{
        this.mistakeTips = true;
      }
    },
    //限制两位小数
    limitTwoDigits(value) {
      return limitDigits(value)
    },
    handleCancel() {
      this.previewVisible = false;
      this.mistakeTips = false;
      this.form = {
        bounty:0,
        cash:0,
        mitigate:0,
        remark:''
      };
    },
    handleCancelPay() {
      this.previewVisiblePay = false;
    },
    onSearch(searchText) {
      console.log('searchText', searchText)
      if (!searchText) {
        this.channelOrEntWordList = []
        this.queryParam.channelName = null
        this.queryParam.entName = null
      }
    },
    onSelect(value) {
      console.log('onSelect', value)
      this.queryParam.channelName = null
      this.queryParam.entName = null
      if (this.wordData.type == 1) {
        this.queryParam.channelName = value
      } else if (this.wordData.type == 2) {
        this.queryParam.entName = value
      }
      //
    },
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
      this.checkAll = checkedList.length === plainOptions.length
      this.queryParam.subitem = checkedList
      if (checkedList.length <= 0) {
        this.queryParam.subitem = null
      } else {
        this.queryParam.subitem = checkedList
      }
    },
    onCheckAllChange(e) {
      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
      let newArr = []
      if (e.target.checked) {
        newArr = this.plainOptions.map(item => {
          return item.value
        })
      }
      this.checkedList = e.target.checked ? newArr : []
      this.indeterminate = false
      this.checkAll = e.target.checked
      if (this.checkedList.length <= 0) {
        this.queryParam.subitem = null
      } else {
        this.queryParam.subitem = this.checkedList
      }

      console.log(this.queryParam)
    },
    //首次获取表格数据
    getTableData() {
      this.loading = true
      let params = {} //查询条件
      let paramsNew = cloneObject(this.queryParam)
      params.data = paramsNew
      if(this.$route.query.bizId){
        params.data.account = this.$route.query.bizId;
      }
      params.pageNo = this.ipagination.current
      params.pageSize = this.ipagination.pageSize
      getOrderV2ListPage(params).then(res => {
        if (res.success) {
          const data = res.result || {}
          // // 赋值表格数据
          this.tableData = data.records || []
          console.log(this.tableData)
          // 赋值总条数
          this.ipagination.total = data.total || 0
          this.loading = false
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //时间选择
    onChange1(date, dateString) {
      this.queryParam.createTimeStart = dateString[0]
      this.queryParam.createTimeEnd = dateString[1]
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination
      this.getTableData(this.activeNums)
    },
    //下载文件 用于excel导出
    handleExportXlsFun(exportObj) {
      this.queryParam.account = this.$route.query.bizId;
      exportObj.data = this.queryParam
      return handleExportXlsNew(exportObj, this)
    },
    //展开
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    //查询
    searchQuerys() {
      this.ipagination.current = 1
      this.getTableData()
    },
    //重置
    searchResets() {
      this.ipagination.current = 1
      this.queryParam = {}
      this.channelOrEntWordList = []
      this.wordData.word = null
      this.getTableData()
    },
    //跳转详情
    goTo(record) {
      const tempItem = plainOptionsobj[record.businessType]
      console.log(record.businessType,tempItem,record);
      tempItem.url &&
      this.$router.push({
        path: tempItem.url,
        query: {
          bizId: record.flowNo,
          orderNo: record.orderNo,
          entId: record.entId,
          ...tempItem.logType,
          // 订单列表-开具发票-业务说明-流水回单上传    订单列表-开具发票-订单发票上传    订单列表-开具发票-下载流水回单
          vhas: 'qsb_qobm:add:kppzsc#qsb_qobm:add:scddfp#qsb_qobm:view:downLoadLSHD'
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-checkbox-group-item {
  margin: 8px 8px 8px 0;
}
.table-div /deep/ .ant-table-selection-column {
  padding: 0;
}
.table-div /deep/ .ant-table-header-column {
  padding: 16px;
}
.table-div /deep/ .ant-table-row-cell-break-word {
  padding: 0;
}
.container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.container .table-li{
  border-bottom: 1px solid #e8e8e8;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/deep/ .modal-content .ant-form-item{
  margin-top: 10px;
}
/deep/ .modal-content .ant-form-item-label > label{
  width: 90px;
  display: inline-block;
}
.pay-content{
  b{
    display: inline-block;
    width: 90px;
  }
}
</style>
